<script setup>
import { updateOrderSubStatus } from "@/api/goods";
import { ElMessage } from "element-plus";
import { computed, ref } from "vue";
import { useOrder } from "@/store/useOrder";

const orderStore = useOrder();

const props = defineProps({
  orderDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  goodsDetails: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

const loading = ref(false);
const handleUpdateOrderSubStatus = async () => {
  loading.value = true;
  try {
    const res = await updateOrderSubStatus({
      orderId: props.orderDetails.id,
      stepStatus: 1,
    });
    orderStore.setReloadOrderDetails(true);
    ElMessage.success("操作成功");
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};

const versionType = computed(() => {
  return props.orderDetails?.versionInfo.versionType === 1
    ? "标准版"
    : "体验版";
});

const alreadyTime = computed(() => {
  const createTime = new Date(props.orderDetails.createTime).getTime();
  const nowTime = new Date().getTime();
  const diff = nowTime - createTime;
  // 转换为 天小时分钟
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  return `${days}天${hours}小时${minutes}分钟`;
});
</script>

<template>
  <div class="status">
    <img class="icon" src="@/assets/order-time-icon.png" alt="" />
    <div class="info">
      <h3 class="title">{{ props.orderDetails.nickName }}已支付，请知悉</h3>
      <p class="tips-1">
        {{ alreadyTime }}内未响应，请尽快回应以免影响后续进程
      </p>
      <p class="tips-2">知悉不代表接单，双方仍需确认需求再开启服务</p>
      <div class="buy-info">
        <p>
          <span>所购规格</span> <span>{{ versionType }}</span>
        </p>
        <p>
          <span>服务总价</span>
          <span>￥{{ props.orderDetails.amount }}</span>
        </p>
        <p>
          <span>订单金额</span>
          <span>￥{{ props.orderDetails.amount }}</span>
        </p>
      </div>
      <p class="btn">
        <el-button :loading="loading" @click="handleUpdateOrderSubStatus"
          >已知悉</el-button
        >
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.status {
  display: flex;
}
.icon {
  flex: 0 0 24px;
  height: 24px;
  margin-right: 8px;
  position: relative;
  top: 1px;
}
.info {
  flex: 1;
  .title {
    font-size: 20px;
    color: #191e28;
    margin-bottom: 12px;
  }
  .tips-1 {
    color: #1dbf73;
    margin-bottom: 6px;
  }
  .tips-2 {
    color: rgba(25, 30, 40, 0.48);
    margin-bottom: 16px;
  }
  .buy-info {
    background: rgba(25, 30, 40, 0.02);
    border-radius: 12px 12px 12px 12px;
    padding: 20px;
    margin-bottom: 16px;
    P {
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:last-child {
        margin-bottom: 0;
      }
      span:nth-child(1) {
        color: rgba(25, 30, 40, 0.48);
        font-size: 16px;
      }
      span:nth-child(2) {
        color: #191e28;
        font-size: 16px;
      }
    }
  }
  .btn {
    button {
      width: 180px;
      height: 48px;
      background: #1dbf73;
      border-radius: 8px 8px 8px 8px;
      border: none;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
    }
  }
}
</style>